<template>
  <div>
    <van-cell title="显示分享面板" @click="showShare = true" />
    <van-share-sheet
      v-model:show="showShare"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
      round
    />
  </div>
</template>

<script>
import { ref } from "vue";
import { showToast } from "vant";

export default {
  setup() {
    const showShare = ref(false);
    const options = [
      { name: "微信", icon: "wechat" },
      { name: "朋友圈", icon: "wechat-moments" },
      { name: "微博", icon: "weibo" },
      { name: "QQ", icon: "qq" },
    ];

    const onSelect = (option) => {
      showToast(option.name);
      showShare.value = false;
    };

    return {
      options,
      onSelect,
      showShare,
    };
  },
};
</script>

<style lang="scss" scoped></style>
